<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { SetAccPwdApi, SetPayPwdApi } from '@/api/user';
  import message from '@/views/form-design/utils/message';
  import { useUserStore } from '@/store/modules/user';

  let api = () => {};
  let type = '';
  const [register, { closeModal }] = useModalInner(async (data) => {
    type = data;
    if (data == 'password') {
      api = SetAccPwdApi;
    } else if (data == 'payPwd') {
      api = SetPayPwdApi;
    }
  });

  const { logout } = useUserStore();
  const formState = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: '',
  });

  const handleSubmit = async () => {
    try {
      await api(formState.value);
      message.success('修改成功');
      if (type == 'password') logout(true);
    } catch (error) {
      message.error('修改失败');
    }
    closeModal();
  };
</script>

<template>
  <BasicModal
    width="1000px"
    v-bind="$attrs"
    title="修改密码"
    @register="register"
    @ok="handleSubmit"
  >
    <a-form @submit="handleSubmit">
      <a-form-item label="当前密码" required>
        <a-input-password v-model:value="formState.oldPassword" />
      </a-form-item>
      <a-form-item label="新的密码" required>
        <a-input-password v-model:value="formState.newPassword" />
      </a-form-item>
      <a-form-item label="确认密码" required>
        <a-input-password v-model:value="formState.confirmPassword" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
